<template>
    <view class="camera-guide" v-if="show">
        <view class="mark" @click.stop="closed">

        </view>
        <view class="drawer" @click.stop="">
            <view class="drawer-header">
                <view class="drawer-header-touch" @click.stop="closed"></view>
                <!--  title S -->
                <view class="drawer-header-title">
                    <view class="dht-txt">
                        {{ signType == 1 ? '签到' : '签退' }}拍照指引
                    </view>
                </view>
                <!-- title  E -->

            </view>

            <!-- 选择题内容 S -->
            <scroll-view @scroll="onScroll" ref="scrollView" scroll-y class="drawer-content">

                <swiper v-if="guide.images&&guide.images.length" indicator-color="#CCCCCC" indicator-active-color="#0091FF" class="swiper" circular
                    :indicator-dots="true" :autoplay="false" :duration="300">
                    <swiper-item v-for="(item, index) in guide.images" :key="index">
                        <image :src="item.url" :mode="'aspectFit'" :lazy-load="true" />
                    </swiper-item>
                </swiper>
                <view class="conts">
                    <rich-text :nodes="guide.desc"></rich-text>
                </view>
            </scroll-view>
            <!-- 选择题内容 E -->
            <view class="drawer-footer">

                <view @click="closed" class="drawer-footer-btn">
                    我知道了

                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { getConfig } from '@/apis/sign.js';
import { watch } from 'vue';
import { mapState } from 'vuex';
export default {
	name: 'camera-guide',
	props: {
		// 1签到 2签退
		signType: {
			type: [String, Number],
			default: 1
		},
		// 1保养 2维修
		orderType: {
			type: [String, Number],
			default: 1
		},
	},
	data() {
		return {
			show: false,
			scrollTop: 0,
			config: {
				 
			},
		};
	},
	computed: {
		...mapState('system', ['onlineStatus']),
		guide() {
			if (this.orderType == 1) {
				if (this.signType == 1) {
					return {
						desc: this.config.cheSignInDesc || '',
						images: this.config.cheSignInImageList || []
					};
				} else {
					return {
						desc: this.config.cheSignOutDesc || '',
						images: this.config.cheSignOutImageList || []
					};
				}
			} else {
				if (this.signType == 1) {
					return {
						desc: this.config.malSignInDesc || '',
						images: this.config.malSignInImageList || []
					};
				} else {
					return {
						desc: this.config.malSignOutDesc || '',
						images: this.config.malSignOutImageList || []
					};
				}
			}
		},
        
	},
	created() {
		if (this.onlineStatus) {
			// 在线
			this.getConfig();
		} else {
			// 离线
			this.getCameraConfig();
		}
	},
	mounted() {
	},
	methods: {
		loaded() {
			// 回调loaded  {images,desc} 
			this.$emit('loaded',this.guide);
			if (!this.guide.images || this.guide.images.length == 0) {
				// 没有设置指引或者没有指引图片不打开
				return;
			}

			// this.signType 1签到，2签退   guide1：已阅读签到  guide2：已阅读签退
			let read = uni.getStorageSync('guide' + this.signType);
			if (!read) {
				// 如果没有打开过指引，展开指引内容
				setTimeout(() => {
					this.open();
				}, 1000);
			}
		},
		getCameraConfig() {
			uni.getStorage({
				key: 'offline_config',
				success: (res) => {
					this.config = res.data || {}; 
					this.loaded();
				},
				fail: () => {
					// this.getConfig();
				},
			});
		},
		getConfig() {
			getConfig().then(res => {
				this.config = res.data.config;
				this.loaded();
				uni.setStorage({
					key: 'offline_config',
					data: res.data.config
				});
			}).catch(()=>{
				this.getCameraConfig();
			});
		},

		async open() {
			this.show = true;
		},

		closed() {
			this.show = false;
			// 设置已阅读
			uni.setStorageSync('guide' + this.signType,true);
		},

		onScroll(e) {

		}
	}
};
</script>
<style lang="scss" scoped>
.camera-guide {
    .mark {
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.1696);
        z-index: 99;
    }

    @keyframes frame {
        from {
            bottom: -70vh;
        }

        to {
            bottom: 0;
        }
    }

    .drawer {
        width: 100%;
        height: 80vh;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        animation: frame 0.2s linear;
        border-radius: 4px 4px 0px 0px;
        overflow: hidden;

        &-header {
            background-color: #fff;

            &-touch {
                width: 100%;
                height: 10px;
                padding: 20rpx 0;
                position: relative;
            }

            &-touch::after {
                content: '';
                position: absolute;
                width: 64rpx;
                height: 10rpx;
                border-radius: 2rem;
                left: calc(50% - 32rpx);
                background: #D8D8D8;
            }

            &-title {
                width: calc(100% - 60rpx);
                border-bottom: 1px solid #D8D8D8;
                padding: 0 30rpx;
                padding-bottom: 30rpx;

                .dht-txt {
                    width: 100%;
                    color: #333333;
                    font-weight: bold;
                    font-size: 32rpx;
                }

                .dht-dsp {
                    width: 100%;
                    color: #666666;
                    font-size: 24rpx;
                    font-weight: normal;
                    padding-top: 10rpx;

                    .light {
                        color: #E02020;
                    }
                }

            }

        }

        &-content {
            flex: 1;
            width: 100%;
            height: calc(100% - 160rpx - 110rpx);
            overflow-y: scroll;
            color: #333333;

            .swiper {
                width: 500rpx;
                height: 700rpx;
                margin: 20rpx auto;

                image {
                    width: 500rpx;
                    height: 100%;
                }
            }

            .conts{
                width: calc(100% - 60rpx);
                padding: 10rpx 30rpx;
            }

        }

        &-footer {
            height: 110rpx;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #D8D8D8;
            padding-bottom: 20rpx;

            &-btn {
                width: calc(100% - 80rpx);
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                border-radius: 8rpx;
                margin: 12px auto;
                font-size: 29rpx;
                text-align: center;
                overflow: hidden;
                color: #fff;
                line-height: 70rpx;
                background-color: #0091FF;
            }

        }

    }
}
</style>